<template>
  <!-- 根容器，动态绑定路由相关的class -->
  <div id="app" :class="routeClass">
    <!-- 路由视图，用于显示当前路由对应的组件 -->
    <router-view />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'

// 获取当前路由实例
const route = useRoute()

// 计算属性，根据当前路由名称生成CSS类名
const routeClass = computed(() => {
  // 获取路由名称，如果不存在则默认为'main'
  const routeName = String(route.name) || 'main'
  return `route-${routeName}`
})
</script>

<style>
/* 导入 Furore 字体 */
@font-face {
  font-family: 'Furore';
  src: url('/Furore.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 全局重置和基础样式 */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #131615;
}

#app {
  height: 100%;
  transition: all 0.3s ease;
  overflow: hidden;
}

/* 主页样式 */
.route-main {
  color: white;
}

/* 1号机页面样式 */
.route-machine {
  color: #333;
}

/* 全局按钮样式 */
button {
  cursor: pointer;
  font-family: inherit;
}

/* 全局链接样式 */
a {
  text-decoration: none;
}

/* 响应式设计：针对小屏幕设备 */
@media (max-width: 768px) {
  #app {
    padding: 10px;
  }
}
</style>
